import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    SafeAreaView,
    Modal,
    ScrollView,
    DeviceEventEmitter
} from 'react-native';

import Constant from '../../utils/Constant'//全局变量
import { getImgUrl, getCarRegisterDate, getMileFormat, getPriceFormat } from '../../utils/ComFunction';
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import Loading from '../../utils/Loading';
import { ToastToUser } from '../../utils/CustomToast';
import AsyncImage from '../../components/image/AsyncImage';
import LogisticDialog from "./orderComponents/LogisticDialog";

let navigation = null

export default class CarOfferPricePage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isEdit: this.props.route.params.isEdit,
            carId: this.props.route.params.carId,
            merchantId: this.props.route.params.merchantId,
            price: '',
            remark: '',
            showConfirmModal: false,
            carInfo: {},
            isModifyPrice: this.props.route.params.isEdit,
            modifyPrice: '',
            quotationRecordId:'',
            oldPrice: '',
            showLogisticDialog: false,
            logisticPriceData: {},
            serviceDrivingFee: 0,
            serviceDrivingPlan: '全程代驾',
            serviceDrivingTotalFee: 0,
            logisticsScheme: ''
        };
    }

    componentDidMount() {
        this.getCarDetails()
        if(this.state.isModifyPrice){
            this.getQuotationByCarId()
        }

    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>
                {/* 顶部导航栏 */}
                <Header navigation={navigation} Title={'车辆报价'} bgColor={'#ffffff'} ></Header>

                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View style={styles.carInfoContain}>
                        {/* 车辆信息卡片 */}
                        <View style={styles.carInfoCard}>
                            <Text style={styles.dealerName}>{this.state.carInfo ? this.state.carInfo.merchantName:''}</Text>
                            <View style={styles.carDetails}>
                                <AsyncImage
                                    source={{
                                        uri: getImgUrl(this.state.carInfo.mainPic),
                                    }}
                                    style={styles.carImage}
                                    defaultSource={require('source/image/comm/sc_default.png')}
                                />
                                <View style={styles.carInfo}>
                                    <Text style={styles.carName}>{this.state.carInfo.seriesName ? this.state.carInfo.seriesName + ' ' + this.state.carInfo.speciesName:''}</Text>
                                    <Text style={styles.carSpecs}>{this.getSubCarInfo(this.state.carInfo)}</Text>
                                    <Text style={styles.carPrice}>挂牌价：{getPriceFormat(this.state.carInfo.listPrice)}</Text>
                                </View>
                            </View>
                        </View>

                        <View style={styles.line}></View>

                        {/* 提示文本 */}
                        <Text style={styles.notice}>
                            *为避免反复改价，请先与卖家确定相对精准的价格，最终交易价格以卖家出具自检报告后商定的价格为准
                        </Text>

                        {/*<View style={styles.priceInput}>*/}

                        {/*    <Text style={styles.inputLabel}>{this.state.isModifyPrice ? '已报价' : '发起报价'}</Text>*/}

                        {/*    <TextInput*/}
                        {/*        style={styles.input}*/}
                        {/*        placeholder="请输入"*/}
                        {/*        value={this.state.price}*/}
                        {/*        onChangeText={(text) => {*/}
                        {/*            this.setState({ price: text });*/}
                        {/*        }}*/}
                        {/*        keyboardType="numeric"*/}
                        {/*        editable={!this.state.isModifyPrice}*/}
                        {/*    />*/}
                        {/*    <Text style={styles.unit}>元</Text>*/}
                        {/*</View>*/}

                        <View style={styles.newPriceInput}>

                            <View style={styles.inputLabelBox}>
                                <Text style={styles.inputLabelLeft}>{'发起报价(元)'}</Text>
                                {this.state.isModifyPrice ? <Text style={styles.inputLabelRight}>{'上次报价' + this.state.oldPrice + '元'}</Text> : null}
                            </View>

                            <View style={styles.inputBox}>
                                <Text style={styles.newInputLabelLeft}>￥</Text>
                                <TextInput
                                    style={styles.newInput}
                                    placeholder="请输入"
                                    value={this.state.price}
                                    onChangeText={(text) => {
                                        this.setState({ price: text }, function (){
                                            this.totalPrice()
                                        });
                                    }}
                                    onBlur={() => {
                                        // 同时更新物流费用估算
                                        this.quotationEstimatedPrice();
                                    }}
                                    keyboardType="numeric"
                                    // editable={!this.state.isModifyPrice}
                                />
                                <TouchableOpacity  onPress={() => {
                                    console.log('加载中')
                                    this.setState({ price: '' });
                                }}>
                                    <Image style={styles.newInputIcon} source={require('source/image/offerPrice/close.png')}/>
                                </TouchableOpacity>

                            </View>
                            {/*<Text style={styles.unit}>元</Text>*/}
                        </View>

                        <View style={styles.line}></View>
                        <View style={{width: '100%', height: 10}}></View>


                        <View style={styles.newPriceInput}>
                            <View style={styles.inputLabelBox}>
                                <Text style={styles.inputLabelLeft}>{'采购成本估算'}</Text>
                                <Text style={styles.inputLabelRight2}>{this.state.serviceDrivingTotalFee + '元 (含物流)'}</Text>
                            </View>

                            <View style={styles.logisticBox}>
                                <View style={styles.logisticBoxDetail}>
                                    <View style={styles.logisticBoxDetailItem}>
                                        <Text style={styles.logisticBoxDetailItemText}>您的出价</Text>
                                        <Text style={styles.logisticBoxDetailItemNumber}>{this.state.price}</Text>
                                    </View>
                                    <Text style={styles.logisticBoxDetailItemJia}>+</Text>
                                    <View style={styles.logisticBoxDetailItem}>
                                        <Text style={styles.logisticBoxDetailItemText}>门店服务费</Text>
                                        <Text style={styles.logisticBoxDetailItemNumber}>{this.formPrice(this.state.logisticPriceData?.detectionFee) || 0}</Text>
                                    </View>
                                    <Text style={styles.logisticBoxDetailItemJia}>+</Text>
                                    <View style={styles.logisticBoxDetailItem}>
                                        <Text style={styles.logisticBoxDetailItemText}>物流费</Text>
                                        <Text style={styles.logisticBoxDetailItemNumber}>{this.state.serviceDrivingFee}</Text>
                                    </View>
                                </View>
                                <View style={styles.logisticLine}></View>
                                <View style={styles.logisticBoxAddress}>
                                    <View style={styles.logisticBoxAddressItem}>
                                        <Text style={{fontSize: 13, color: '#333333', width: 56, marginLeft: 10}}>物流方案</Text>
                                        <Text numberOfLines={1} style={{fontSize: 12, color: '#FD6521', marginLeft: 5}}>{this.state.logisticsScheme || ''}</Text>
                                    </View>
                                    <TouchableOpacity activeOpacity={0.7} onPress={() => {
                                        this.setState({ showLogisticDialog: true });
                                    }}>
                                        <View style={styles.logisticBoxAddressItem}>
                                            <Text style={{fontSize: 13, color: '#666666', width: 56}}>{this.state.serviceDrivingPlan}</Text>
                                            <Text style={{
                                                fontSize: 10, color: '#FF7B00', backgroundColor: '#FFF7E0',
                                                padding: 2, marginRight: 2
                                            }}>切换</Text>
                                            <Image style={styles.changeIcon} source={require('source/image/offerPrice/change.png')}/>
                                            <Text style={{width:6}}></Text>
                                        </View>
                                    </TouchableOpacity>

                                </View>
                            </View>

                        </View>

                        <View style={{width: '100%', height: 15}}></View>

                        {/*{this.state.isModifyPrice ?*/}
                        {/*    <View style={styles.priceInput}>*/}

                        {/*        <Text style={styles.inputLabel}>修改后</Text>*/}

                        {/*        <TextInput*/}
                        {/*            style={styles.input}*/}
                        {/*            placeholder="请输入"*/}
                        {/*            value={this.state.modifyPrice}*/}
                        {/*            onChangeText={(text) => {*/}
                        {/*                this.setState({ modifyPrice: text });*/}
                        {/*            }}*/}
                        {/*            keyboardType="numeric"*/}
                        {/*        />*/}
                        {/*        <Text style={styles.unit}>元</Text>*/}
                        {/*    </View>*/}

                        {/*    : null*/}
                        {/*}*/}

                    </View>

                    <View style={styles.inputSection}>

                        <View style={styles.remarkInput}>
                            <Text style={styles.inputLabel}>备注</Text>
                            <TextInput
                                style={styles.remarkTextInput}
                                placeholder="报价备注内容"
                                value={this.state.remark}
                                onChangeText={(text) => this.setState({ remark: text })}
                                multiline={true}
                                maxLength={500}
                            />
                            <Text style={styles.wordCount}>{this.state.remark.length}/500</Text>
                        </View>
                    </View>
                </ScrollView>

                {/* 底部按钮 */}
                <View style={[styles.bottomButtons, { height: 60 + Constant.bottomHeight }]}>
                    <TouchableOpacity
                        style={styles.cancelButton}
                        onPress={()=>{
                            navigation.goBack()
                        }}
                    >
                        <Text style={styles.cancelButtonText}>取消</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.submitButton}
                                      onPress={() => {
                                          if (this.state.price == '') {
                                              ToastToUser('请输入报价')
                                              return
                                          }
                                          // console.log('this.state.isModifyPrice', this.state.isModifyPrice)
                                          if (this.state.isModifyPrice && this.state.price == '') {
                                              ToastToUser('请输入修改后报价')
                                              return
                                          }
                                          this.setState({ showConfirmModal: true })
                                      }}>
                        <Text style={styles.submitButtonText}>提交报价</Text>
                    </TouchableOpacity>
                </View>

                {/* 弹窗提示 */}
                <LogisticDialog
                    visible={this.state.showLogisticDialog}
                    title={"选择运输方案"}
                    confrimText={"确认"}
                    cancelText={"取消"}
                    data={this.state.logisticPriceData}
                    onConfrim={(data) => {
                        console.log('确认方案', data)
                        //10:分段运输, 40:全程代驾, 30:全程小板
                        let serviceDrivingPlan = ''
                        let serviceDrivingFee =  data.price
                        if(data.plan == 10){
                            serviceDrivingPlan = '分段运输'
                        }
                        if(data.plan == 30){
                            serviceDrivingPlan = '全程小板'
                        }
                        if(data.plan == 40){
                            serviceDrivingPlan = '全程代驾'
                        }
                        if(data.plan == 0){
                            serviceDrivingPlan = '自提'
                        }
                        this.setState({
                            serviceDrivingPlan: serviceDrivingPlan,
                            serviceDrivingFee: serviceDrivingFee,
                            showLogisticDialog: false,
                        }, function (){
                            this.totalPrice()
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            showLogisticDialog: false
                        })
                    }}
                />

                {/* 添加确认弹窗 */}
                <Modal
                    visible={this.state.showConfirmModal}
                    transparent={true}
                    animationType="fade"
                >
                    <View style={styles.modalOverlay}>
                        <View style={styles.modalContent}>
                            <Text style={styles.modalTitle}>请确认您的报价</Text>
                            <Text style={styles.modalPrice}>{this.state.isModifyPrice ? parseFloat(this.state.price).toFixed(2)+'' : parseFloat(this.state.price).toFixed(2)+''}<Text style={{ fontSize: 14, fontWeight: '500' }}>元</Text></Text>
                            {/* {this.state.remark != '' ?
                <View style={styles.modalRemarkContain}>
                  <Text style={styles.modalRemarkLabel}>备注：</Text>
                  <Text style={styles.modalRemark}>{this.state.remark}</Text>
                </View>
                :
                null
              } */}
                            <View style={styles.modalButtons}>
                                <TouchableOpacity
                                    style={[styles.modalButton, {backgroundColor: '#F5F5F5'}]}
                                    onPress={() => this.setShowConfirmModal(false)}
                                >
                                    <Text style={styles.modalButtonText}>返回</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={[styles.modalButton, {marginLeft: 12, backgroundColor: '#FFE000'}]}
                                    onPress={() => {

                                        this.setShowConfirmModal(false);

                                        if (this.state.isModifyPrice) {
                                            this.modifyPrice()
                                        } else {
                                            this.submitPrice()
                                        }
                                    }}
                                >
                                    <Text style={styles.modalButtonText}>提交</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </Modal>

                <Loading onRef={(ref) => (this.Loading = ref)} />

            </View>
        );
    }

    getSubCarInfo(item) {

        let carInfoStr = ''
        if (item.registerDate && item.registerDate != null) {
            carInfoStr = getCarRegisterDate(item.registerDate)
        }

        if (item.mileage && item.mileage != 0) {
            carInfoStr = carInfoStr + ' | ' + getMileFormat(item.mileage)
        }

        if (item.cityName && item.cityName != '') {
            if (carInfoStr != '') {
                carInfoStr = carInfoStr + ' | ' + item.cityName
            } else {
                carInfoStr = item.cityName
            }

        }

        return carInfoStr
    }

    setShowConfirmModal(isShow) {
        this.setState({
            showConfirmModal: isShow
        })
    }

    totalPrice(){
        const totalFee = parseFloat(this.state.price || 0)
            + parseFloat(this.formPrice(this.state.logisticPriceData?.detectionFee))
            + parseFloat(this.state.serviceDrivingFee)
        this.setState({
            serviceDrivingTotalFee: totalFee
        })
    }
    quotationEstimatedPrice(){
        let param = {
            carId: this.state.carId,
            buyerMerchantId: Constant.userInfo.merchantId,
            sellerMerchantId: this.state.carInfo.merchantId,
            quotationAmount: this.state.price * 100,
            // transportScheme: this.state.transportScheme,
        }

        // if(this.state.transportScheme == 10){
        //     param.pickupMethod = 'driver'
        //     param.deliveryMethod = 'cart'
        // }

        if (this.Loading) {
            this.Loading.show('价格估算中...');
        }

        HttpUtils.postRequest(HttpUrls.quotationEstimatedPrice, param)
            .then((result) => {
                let data = result.data
                console.log('quotationEstimatedPrice', data)
                this.setState({
                    logisticPriceData: data,
                    serviceDrivingFee: this.formPrice(data?.fullServiceDrivingFee || 0),
                    serviceDrivingPlan: '全程代驾',
                    //this.state.logisticPriceData?.originCityStr || ''}-{this.state.logisticPriceData?.destinationCityStr || ''
                    logisticsScheme: data?.originCityStr + '-' + data?.destinationCityStr,
                })
                this.totalPrice()
            })
            .catch((error) => {
            }).finally(() => {
                if (this.Loading) {
                    this.Loading.hide();
                }
        })
    }

    getCarDetails() {
        let param = {
            carId: this.state.carId,
            merchantId: this.state.merchantId
        }
        if (this.Loading) {
            this.Loading.show();
        }

        HttpUtils.getRequest(HttpUrls.getOthersCarDetails, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let data = result.data
                this.setState({
                    carInfo: data
                })
                if(this.state.price > 0){
                    this.quotationEstimatedPrice()
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    formPrice(price) {
        if(!price){
            return 0
        }
        return parseFloat(price/100).toFixed(2)
    }

    getQuotationByCarId() {
        let param = {
            carId: this.state.carId
        }
        HttpUtils.getRequest(HttpUrls.getQuotationByCarId, param)
            .then((result) => {
                if (result.code == 0) {
                    let data = result.data
                    this.setState({
                        price: (data.quotationPrice/100).toFixed(2),
                        oldPrice: (data.quotationPrice/100).toFixed(2),
                        remark: data.remark ? data.remark : '',
                        quotationRecordId:data.quotationRecordId
                    }, function (){
                        this.quotationEstimatedPrice()
                    })
                }
            })
            .catch((error) => {

            });
    }


    submitPrice() {
        let param = {
            carId: this.state.carId,
            buyerMerchantId: Constant.userInfo.merchantId,
            sellerMerchantId: this.state.carInfo.merchantId,
            buyerUserId: Constant.userInfo.userId,
            quotationPrice: this.state.price  * 100,
            remark: this.state.remark
        }
        if (this.Loading) {
            this.Loading.show('提交中...');
        }

        HttpUtils.postRequest(HttpUrls.offerPriceSubmit, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0) {
                    ToastToUser('提交报价成功')
                    //跳转会话列表
                    /**
                     * "imConversationId": "sg_2805619973", "imGroupId": 2805619973,
                     */

                    DeviceEventEmitter.emit('offerPriceStateChanged', {});


                    setTimeout(() => {
                        navigation.replace('MessageChat', {
                            imGroupId: result.data.imGroupId ,
                            carId: this.state.carId ,
                            quotationRecordId: result.data.quotationRecordId
                        })
                    }, 1500);

                } else {
                    ToastToUser(result.msg+'')
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    modifyPrice() {
        let param = {
            quotationRecordId: this.state.quotationRecordId,
            quotationPrice: this.state.price  * 100,
            remark: this.state.remark,
            buyerMerchantId: Constant.userInfo.merchantId
        }
        if (this.Loading) {
            this.Loading.show('提交中...');
        }

        HttpUtils.postRequest(HttpUrls.modifyOfferPriceSubmit, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0) {
                    ToastToUser('修改成功')
                    DeviceEventEmitter.emit('offerPriceStateChanged', {});
                    setTimeout(() => {
                        navigation.goBack()
                    }, 1500);
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }


};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 44,
        backgroundColor: '#fff',
        paddingHorizontal: 15,
    },
    backButton: {
        padding: 10,
    },
    backText: {
        fontSize: 20,
    },
    title: {
        flex: 1,
        textAlign: 'center',
        fontSize: 18,
        fontWeight: '500',
        marginRight: 40,
    },
    carInfoCard: {
        backgroundColor: '#fff',
        padding: 10,
        marginBottom: 5,
        borderRadius: 4,
    },
    dealerName: {
        fontSize: 14,
        marginBottom: 10,
        marginTop: 5,
        color: '#333333',
        fontWeight: 'bold'
    },
    carDetails: {
        flexDirection: 'row',
    },
    carImage: {
        width: 130,
        height: 90,
        borderRadius: 4,
        backgroundColor: '#ccc',
    },
    carInfo: {
        flex: 1,
        marginLeft: 10,
        height: 90,
        justifyContent: 'space-between',
    },
    carName: {
        fontSize: 14,
        fontWeight: '500',
        color: '#333',
        lineHeight: 20
    },
    carSpecs: {
        fontSize: 12,
        color: '#333',
        marginTop: 5,
    },
    carPrice: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
        marginTop: 5,
    },
    notice: {
        fontSize: 12,
        color: '#ED542E',
        padding: 15,
        lineHeight: 17,
    },
    inputSection: {
        backgroundColor: '#fff',
        padding: 15,
        marginTop: 12,
        marginLeft: 15,
        marginRight: 15,
        borderRadius: 4
    },
    priceInput: {
        height: 56,
        paddingHorizontal: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    inputLabel: {
        fontSize: 14,
        color: '#333333',
        fontWeight: 'bold',
    },
    priceInputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    input: {
        flex: 1,
        height: 56,

        padding: 0,
        marginLeft: 30,
        marginRight: 10,
        fontSize: 14,
        color: '#333333',
    },
    unit: {
        marginLeft: 10,
        fontSize: 14,
        color: '#333333',
    },
    remarkTextInput: {
        height: 120,
        backgroundColor: '#f6f6f6',
        borderRadius: 4,
        padding: 10,
        textAlignVertical: 'top',
        marginTop: 12,
        fontSize: 14,
        color: '#333333'
    },
    wordCount: {
        textAlign: 'right',
        fontSize: 12,
        color: '#999',
        marginTop: 5,
        position: 'absolute',
        right: 10,
        bottom: 10
    },
    bottomButtons: {
        flexDirection: 'row',
        paddingHorizontal: 15,
        paddingTop: 12,
        backgroundColor: '#fff',
    },
    cancelButton: {
        flex: 1,
        height: 36,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f5f5',
        borderRadius: 22,
        marginRight: 10,
    },
    submitButton: {
        flex: 2,
        height: 36,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffeb00',
        borderRadius: 22,
    },
    cancelButtonText: {
        fontSize: 14,
        color: '#333',
    },
    submitButtonText: {
        fontSize: 14,
        color: '#333',
    },

    carInfoContain: {
        flexDirection: 'column',
        marginLeft: 15,
        marginRight: 15,
        backgroundColor: '#fff',
        marginTop: 10,
        borderRadius: 4
    },
    line: {
        height: 0.5,
        backgroundColor: '#E4E4E4',
        marginLeft: 10,
        marginRight: 10
    },

    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: 'white',
        borderRadius: 10,
        width: '80%',
        paddingLeft: 24,
        paddingRight: 24,
        paddingTop: 32
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: '500',
        textAlign: 'center',
        marginBottom: 15,
        color: '#222',
    },
    modalSubtitle: {
        fontSize: 14,
        color: '#333',
        marginBottom: 5,
    },
    modalPrice: {
        fontSize: 30,
        color: '#ED542E',
        textAlign: 'center',
        marginBottom: 15,
        fontWeight: 'bold'
    },
    modalRemarkContain: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    modalRemarkLabel: {
        fontSize: 14,
        color: '#666666',
    },
    modalRemark: {
        fontSize: 14,
        color: '#666',

    },
    modalButtons: {
        flexDirection: 'row',
        marginVertical: 24,
    },
    modalButton: {
        flex: 1,
        height: 40,
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },
    modalButtonText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: 'bold'
    },

    // 新版报价样式
    newPriceInput: {
        flexDirection: 'column',
        paddingHorizontal: 10,
    },
    inputLabelBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    inputLabelLeft: {
        fontSize: 14,
        color: '#333333',
        fontWeight: 'bold',
        width: '40%',
    },
    inputLabelRight: {
        fontSize: 14,
        color: '#666666',
        width: '60%',
        textAlign: 'right',
    },
    inputLabelRight2: {
        fontSize: 14,
        color: '#333333',
        width: '60%',
        textAlign: 'right',
    },
    inputBox: {
        paddingHorizontal: 16,
        flexDirection:'row',
        alignItems:'center'
    },
    newInputLabelLeft: {
        fontSize: 18,
        color:'#333333'
    },
    newInput: {
        flex: 1,
        height: 56,
        padding: 0,
        marginLeft: 10,
        marginRight: 10,
        fontSize: 16,
        color: '#333333',
    },
    newInputIcon: {
        width: 18,
        height: 18,
    },
    logisticBox: {
        width: '100%',
        marginTop: 12,
        backgroundColor: '#F9F9F9',
        borderRadius: 4,
    },
    logisticBoxDetail: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: 10,
        marginBottom: 10,
    },
    logisticBoxDetailItem: {
        width: '27%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor: 'blue',
    },
    logisticBoxDetailItemJia: {
        width: '8%',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        // backgroundColor: 'red',
    },
    logisticBoxDetailItemText: {
        fontSize: 12,
        color: '#666666',
    },
    logisticBoxDetailItemNumber: {
        fontSize: 12,
        color: '#333333',
        marginTop: 5,
    },
    logisticLine: {
        height: 1,
        backgroundColor: '#E4E4E4',
        marginLeft: 10,
        marginRight: 10,
    },
    logisticBoxAddress: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    logisticBoxAddressItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        marginTop: 10,
        marginBottom: 10,
    },
    changeIcon: {
        width: 16,
        height: 16,
    },

});
